<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>
    <el-row>
      <el-col :span="24">
        <div class="panel-group1">



          <el-tabs v-model="activeName" @tab-click="handleClick">

            <el-tab-pane label="出票管理" name="first">
              <el-form :model="queryParams" ref="queryForm" label-width="100px" class="demo-ruleForm">
                <div class="row " style="margin-left: -16px;">
                  <el-form-item class="itembox box2" label="快递单号：">
                    <el-input clearable v-model="queryParams.tracking_number"></el-input>
                  </el-form-item>
                  <el-button style="height: 36px;width: 86px;" type="primary" @click="handleQuery">查询</el-button>
                  <el-button style="height: 36px;width: 86px;" @click="resetQuery">清空</el-button>
                </div>
              </el-form>

              <el-button type="primary" class="mb_20" @click="gdAdd">新增发票</el-button>

              <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" v-loading="loading">

                <el-table-column prop="id" label="编号" align="center"></el-table-column>
                <el-table-column prop="title" label="发票抬头" align="center"></el-table-column>
                <el-table-column prop="social_uniform_code" label="社会统一代码" align="center"></el-table-column>
                <el-table-column prop="address" label="开票地址" align="center"></el-table-column>
                <el-table-column prop="phone" label="开票电话" align="center"></el-table-column>
                <el-table-column prop="bank_name" label="开户银行名称" align="center"></el-table-column>
                <el-table-column prop="account" label="开户银行账号" align="center"></el-table-column>
                <el-table-column prop="tracking_number" label="快递单号" align="center"></el-table-column>

                <el-table-column prop="invoice_type" label="类型">
                  <template slot-scope="scope">
                    <div v-if="scope.row.invoice_type==1">纸质发票</div>
                    <div v-if="scope.row.invoice_type==2">电质发票</div>
                  </template>
                </el-table-column>

                <el-table-column prop="consignee_information" label="收件信息" align="center"></el-table-column>
                <el-table-column prop="price" label="发票金额" align="center"></el-table-column>
                <el-table-column prop="start_time" label="开票时间" align="center"></el-table-column>
                <!-- <el-table-column prop="quantity" label="发票数量" align="center"></el-table-column> -->

                <el-table-column label="状态" align="center" prop="condition">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.condition==0" class="ml-2" type="info">无修改</el-tag>
                    <el-tag v-if="scope.row.condition==1" class="ml-2" type="danger">管理员已修改</el-tag>
                    <el-tag v-if="scope.row.condition==2" class="ml-2" type="success">用户已修改</el-tag>
                  </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="350px">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="total>0" :total="total" :page.sync="queryParams.noPage" :limit.sync="queryParams.pageSize" @pagination="getList" />

            </el-tab-pane>

            <el-tab-pane label="进票管理" name="second">

              <EnvoiceEnter></EnvoiceEnter>
            </el-tab-pane>


          </el-tabs>





        </div>
      </el-col>
    </el-row>


    <el-dialog center :title="title" :visible.sync="open" width="68%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" label-position="left">

        <el-form-item label="发票抬头" prop="title">
          <!-- <el-input v-model="form.title" placeholder="请输入" /> -->

          <el-autocomplete style="width: 100%;" v-model="form.title" :fetch-suggestions="querySearchAsync" placeholder="请输入选择" @select="handleSelect" clearable></el-autocomplete>
        </el-form-item>

        <el-form-item label="社会统一代码" prop="social_uniform_code" align="right">
          <el-input v-model="form.social_uniform_code" placeholder="请输入" disabled />
        </el-form-item>

        <el-form-item label="开票地址" prop="address" align="right">
          <el-input v-model="form.address" placeholder="请输入" disabled />
        </el-form-item>

        <el-form-item label="开票电话" prop="phone" align="right">
          <el-input v-model="form.phone" placeholder="请输入" disabled />
        </el-form-item>

        <el-form-item label="开户行名称" prop="bank_name" align="right">
          <el-input v-model="form.bank_name" placeholder="请输入" disabled />
        </el-form-item>

        <el-form-item label="开户行账号" prop="account" align="right">
          <el-input v-model="form.account" placeholder="请输入" disabled />
        </el-form-item>

        <el-form-item label="快递单号" prop="tracking_number" align="right">
          <el-input v-model="form.tracking_number" placeholder="请输入" />
        </el-form-item>



        <el-form-item label="类型" prop="invoice_type">
          <el-radio-group v-model="form.invoice_type">
            <el-radio :label="1">纸质发票</el-radio>
            <el-radio :label="2">电子发票</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="收件信息" prop="consignee_information" align="right">
          <el-input v-model="form.consignee_information" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="发票金额" prop="price" align="right">
          <el-input v-model="form.price" placeholder="请输入" />
        </el-form-item>



        <el-form-item label="开票时间" prop="start_time">
          <el-date-picker v-model="form.start_time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="发票数量" prop="quantity" align="right">
          <el-input v-model="form.quantity" placeholder="请输入" type="number" />
        </el-form-item>

        <!--        <el-form-item label="上传图片" prop="picture">
          <el-upload :action="upload_url" :on-success="handleLogSuccess" :show-file-list="false"
            class="avatar-uploader">
            <img style="width: 100px;height: 100px;" v-if="form.picture" :src="form.picture" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->

        <el-form-item label="上传图片" prop="picture">
          <el-upload :action="upload_url" list-type="picture-card" :on-success="handleChangePho" :file-list="phoFiles" :on-remove="handleRemovePho" :show-file-list="true">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input :rows="4" v-model="form.remark" type="textarea" placeholder="请输入"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer center" v-if="!ulid">
        <div class="quxiao">
          <el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="cancel">取消</el-button>
        </div>
        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>







  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Vue from 'vue';
  import Navvz from "@/components/Navvz";
  import Sidebartss from "@/components/Sidebartss";
  import * as Work from "@/api/operation/work";
  import * as Contract from "@/api/operation/contract";
  import * as Invoice from "@/api/operation/invoice";
  import EnvoiceEnter from "@/views/center/invoiceEnter";

  import * as Auth from '@/utils/auth';
  export default {
    name: 'Index',
    components: {
      Navvz,
      Sidebartss,
      EnvoiceEnter,

    },
    data() {
      return {
        phoFiles: [],
        suggestions: [],
        activeName: 'first',
        // 总条数
        total: 0,
        title: '',
        ulid: '',
        userId: '',
        nickname: '',
        upload_url: process.env.VUE_APP_BASE_URL + '/file/upload',
        form: {

        },
        open: false,
        fileList: [],
        loading: false,




        // 查询参数
        queryParams: {
          noPage: 1,
          pageSize: 10,
          tracking_number: null,
        },
        // 日期范围
        dateRange: [],
        tableData: [],
        // 表单校验
        rules: {
          title: [{
            required: true,
            message: "发票抬头不能为空",
            trigger: "blur"
          }],
          social_uniform_code: [{
            required: true,
            message: '"社会统一代码不能为空',
            trigger: 'change'
          }],
          address: [{
            required: true,
            message: '开票地址不能为空',
            trigger: 'change'
          }],
          phone: [{
            required: true,
            message: '开票电话不能为空',
            trigger: 'change'
          }, {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }],
          bank_name: [{
            required: true,
            message: '开户银行名称不能为空',
            trigger: 'change'
          }],

          account: [{
            required: true,
            message: '开户银行账号不能为空',
            trigger: 'change'
          }],

          tracking_number: [{
            required: true,
            message: '快递单号不能为空',
            trigger: 'change'
          }],
          invoice_type: [{
            required: true,
            message: '类型不能为空',
            trigger: 'change'
          }],
          consignee_information: [{
            required: true,
            message: '收件信息不能为空',
            trigger: 'change'
          }],
          price: [{
              required: true,
              message: '发票金额不能为空',
              trigger: 'change'
            },
            {
              pattern: /^[0-9]+(\.[0-9]{1,2})?$/,
              message: '请输入正确的金额格式',
              trigger: 'blur'
            }
          ],
          start_time: [{
            required: true,
            message: '开票时间不能为空',
            trigger: 'change'
          }],
          quantity: [{
            required: true,
            message: '发票数量不能为空',
            trigger: 'change'
          }],

        },

      }
    },
    created() {

      // 读取缓存
      this.nickname = localStorage.getItem('username')
      this.userId = localStorage.getItem('user_id')
      this.getList();

    },

    mounted() {

    },
    methods: {

      //相册上传成功调用
      handleChangePho(res, file, fileList) {
        this.phoChange(fileList);
      },
      //图片移出
      handleRemovePho(file, fileList) {
        this.phoChange(fileList);

      },

      // 设置photo值--图片上传拼接数据
      phoChange(fileList) {

        let temp_arr = [];
        if (fileList.length > 0) {
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].response) {
              if (fileList[i].response.code === 200) {
                if (i === 0) {
                  temp_arr.push(fileList[i].response.data);
                } else {
                  temp_arr.push(fileList[i].response.data);
                }
              }
            }
          }
        }

        this.form.picture = temp_arr;
      },

      handleClick() {

      },

      querySearchAsync(queryString, cb) {

        if (queryString) {
          var per = {}
          per.type = '1'
          per.title = queryString
          per.type_pj = 1

          this.loading = true;
          Invoice.getInvoicingCompanyList(per).then(response => {
            this.suggestions = response.data.list;
            cb(this.suggestions);
            this.loading = false;
          });
        }
      },

      handleSelect(item) {
        console.log('abcdefg', item)
        this.form.social_uniform_code = item.social_uniform_code
        this.form.address = item.address
        this.form.phone = item.phone
        this.form.bank_name = item.bank_name
        this.form.account = item.account
      },

      handleLogSuccess(res) {
        this.$set(this.form, 'picture', res.data);
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.tracking_number = null,
          this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.noPage = 1;
        this.getList();
      },


      /** 修改按钮操作 */
      handleUpdate(row) {
        this.form = row;

        this.phoFiles = [];
        for (let i = 0; i < row.picture.length; i++) {
          var per = {
            response: {
              code: 200,
              data: row.picture[i]
            },
            url: row.picture[i]
          }
          this.phoFiles.push(per)
        }


        this.title = '修改出票';
        this.open = true;
      },





      // 表单重置
      reset() {
        this.fileList = [];
        this.phoFiles = [];
        this.form = {};
        this.resetForm("form");
      },

      /** 查询发票列表 */
      getList() {
        //jp 0 出票  1进票
        this.queryParams.user_id = this.userId
        this.queryParams.platform = 'biqi-developer-platform'
        this.queryParams.type_pj = 1
        this.queryParams.jp = 0
        this.loading = true;
        Invoice.getList(this.queryParams).then(response => {
          this.tableData = response.data.list;
          this.total = response.data.pagination.totalCount;
          this.loading = false;
        });
      },






      /** 删除按钮操作 */
      handleDelete(row) {
        var peres = {};
        peres.user_id = this.userId
        peres.platform = 'biqi-developer-platform'
        peres.type_pj = 1
        peres.id = [row.id]
        this.$modal.confirm('是否确认删除').then(function() {
          return Invoice.Delete(peres);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },





      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.form.user_id = this.userId
            this.form.platform = 'biqi-developer-platform'
            this.form.type_pj = 1
            this.form.condition = 2
            this.loading = true;
            if (this.form.id) {
              Invoice.Update(this.form).then(response => {
                this.$modal.msgSuccess('修改成功');
                this.open = false;
                this.loading = false;
                this.getList();
              });
            } else {
              Invoice.Add(this.form).then(response => {
                this.$modal.msgSuccess('新增成功');
                this.open = false;
                this.loading = false;
                this.getList();
              });
            }
          }
        });
      },











      // 取消按钮
      cancel() {
        this.open = false;

      },



      //添加合同 按钮
      gdAdd() {
        this.title = '添加出票';
        this.form = {};
        this.ulid = '';
        this.open = true;
        this.reset()
        this.getList();

      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
    // padding: 5px 0 15px 40px;
  }

  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 760px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .ddfbzy {
    width: 112px;
    height: 32px;
    background: #FFDBDB;
    border-radius: 4px;
  }

  .zzcl {
    width: 112px;
    height: 32px;
    background: #DBE2FF;
    border-radius: 4px;
  }

  .yhfk {
    width: 112px;
    height: 32px;
    color: #FFFFFF;
    background: #306EF2;
    border-radius: 4px;
  }

  .ywj {
    width: 112px;
    height: 32px;
    background: #E3E3E3;
    border-radius: 4px;
  }

  .itembox {
    margin-right: 45px;

  }

  ::v-deep .el-button--primary {
    color: #FFFFFF;
    background-color: #3FC1C9 !important;
    border-color: #3FC1C9 !important;
  }

  ::v-deep .el-button:hover,
  .el-button:focus {
    color: #000000;
    border-color: #A5EDF1;
    background-color: #A5EDF1;
  }

  ::v-deep .el-rate__icon {
    font-size: 38px;
  }
</style>